<template>
  <div class="free-table">
    <el-table
      ref="elTable"
      :data="data"
      v-bind="$attrs"
      :height="`calc(100% - ${bottomBlank}px)`"
      :class="tableClazz"
      v-on="$listeners"
    >
      <template v-for="item in tbColumns">
        <el-table-column
          v-if="item.slotScope"
          :key="item.prop"
          v-bind="item"
          v-on="$listeners"
        >
          <template slot-scope="scope">
            <slot :name="item.prop" v-bind="scope" />
          </template>
        </el-table-column>

        <free-column v-else :key="item.prop" v-bind="$attrs" :column="item" />
      </template>
      <template v-if="append" slot="append">
        <div class="append" @click="appendClick">
          <span class="button">
            <i class="el-icon-plus" />
            添加样本
          </span>
        </div>
      </template>
      <template slot="empty">
        <el-empty>
          <svg
            slot="image"
            class="svgClass"
            aria-hidden="true"
            v-on="$listeners"
          >
            <use xlink:href="#icon-iconquesheng" />
          </svg>
          <p slot="description">{{ emptyText }}</p>
        </el-empty>
      </template>
    </el-table>

    <template v-if="pagination">
      <pagination v-if="data.length > 0" v-bind="$attrs" v-on="$listeners" />
    </template>
  </div>
</template>

<script>
import FreeColumn from './columu'
import Pagination from '../Pagination'

export default {
  componentName: 'FreeTable',
  name: 'FreeTable',
  components: {
    Pagination,
    FreeColumn
  },
  props: {
    data: Array,
    column: Array,
    columnsProps: Object,
    pagination: {
      type: Boolean,
      default: false
    },
    bottomBlank: {
      type: Number,
      default: 0
    },
    append: {
      type: Boolean,
      default: false
    },
    appendClick: {
      type: Function,
      default: () => {}
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableMaxHeight: null,
      controller: true
    }
  },
  computed: {
    tbColumns() {
      const { column, columnsProps: props } = this

      return column.map((col) => {
        const it = Object.assign({}, props, col)
        return it
      })
    },
    tableClazz() {
      const tableClazz = []
      if (this.type === 'small') {
        tableClazz.push(this.type + '-table')
      }
      return tableClazz
    }
  },

  created() {
    this.$on('onTableBar', (height) => {
      console.log(1)
      const tableHeight = this.$refs.elTable.$el.offsetHeight + height
      this.tableMaxHeight = tableHeight
    })
  }
}
</script>

<style lang="scss" scoped>
.append {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  background: #ffffff;
  .button {
    width: 80px;
    height: 16px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #1890ff;
    line-height: 16px;
    letter-spacing: 0.21px;
    cursor: pointer;
  }
}

::v-deep .el-empty {
  .el-empty__description {
    margin-top: 0;
    p {
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      line-height: 20px;
      letter-spacing: 0.21px;
    }
  }
}
::v-deep .el-table:before {
  height: 0;
}
</style>
